<!--生产商-->
<template>
  <div>
    <el-select v-model="performFreq" :clearable="clearable" :disabled="props.disabled" :filter-method="filterMethod"
               :placeholder="placeholder" filterable
               style="width: 100%;" @change="performFreqChange" @keyup.enter.native="changeFocusPerformFreq">
      <el-option v-for="item in performFreqFilterList" :key="item.freqId" :label="item.freqDesc" :value="item.freqId">
      </el-option>
    </el-select>
  </div>
</template>

<script lang="ts" setup>

import {useDictStoreHook} from "@/store/modules/dict";
import {firstLetterResult} from "@/utils/pinyin";

const dictStore = useDictStoreHook();
// 频次list
const performFreqList = ref<any>(dictStore.performFreqList)
const performFreqFilterList = ref<any>(performFreqList.value)
const emits = defineEmits(["changeFocusPerformFreq", "performFreqInfoChange"])
const props = defineProps({
  placeholder: {
    type: String,
    default: "请选择"
  },
  value: {
    type: String,
    default: ''
  },
  disabled: {
    type: Boolean,
    default: false
  },
  clearable: {
    type: Boolean,
    default: true
  }
})

const performFreq = ref(props.value)
watch(() => props.value, (val, _old) => {
  performFreq.value = val
})

function performFreqChange(value) {
  let performFreqInfo = {}
  let index = performFreqList.value.findIndex((item: any) => {
    return item.freqId === value
  })
  if (index > -1) {
    performFreqInfo = performFreqList.value[index]
  }
  emits("performFreqInfoChange", performFreqInfo)
}

function changeFocusPerformFreq() {
  emits("changeFocusPerformFreq")
}

/**
 * 筛选选项
 * @param searchContent
 */
function filterMethod(searchContent: string) {
  if (searchContent) {
    performFreqFilterList.value = performFreqList.value.filter((item: any) => {
      return firstLetterResult(item.freqDesc).toLowerCase().includes(searchContent) ||
        item.freqDesc.includes(searchContent)
    })
  } else {
    performFreqFilterList.value = performFreqList.value
  }
}

</script>
<script lang="ts">
export default {
  name: "producer"
}
</script>

<style scoped></style>
